<template>
  <view class="container">
    <view class="uni-list-cell">
      <view class="uni-list-cell-left"> 当前选择 </view>
      <view class="uni-list-cell-db" style="flex: 1">
        <picker @change="bindPickerChange" :value="index" :range="array">
          <view class="uni-input">{{ array[index] }}</view>
        </picker>
      </view>
    </view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left"> 当前选择 </view>
        <view class="uni-list-cell-db">
          <picker
            mode="time"
            :value="time"
            start="09:01"
            end="21:01"
            @change="bindTimeChange"
          >
            <view class="uni-input">{{ time }}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="uni-list-cell">
      <view class="uni-list-cell-left"> 当前选择 </view>
      <view class="uni-list-cell-db" style="flex: 1">
        <picker
          mode="time"
          :value="time"
          start="09:01"
          end="21:01"
          @change="bindTimeChange"
        >
          <view class="uni-input">{{ time }}</view>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      const currentDate = this.getDate({
        format: true,
      });
      return {
        title: "picker",
        index: 0,
        array: ["中国", "美国", "巴西", "日本"],
        date: currentDate,
        time: "12:01",
      };
    },
    methods: {
      bindPickerChange: function (e) {
        console.log("picker发送选择改变，携带值为", e.detail.value);
        this.index = e.detail.value;
      },
      bindDateChange: function (e) {
        this.date = e.detail.value;
      },
      bindTimeChange: function (e) {
        console.log("time picker发送选择改变，携带值为", e.detail.value);
        this.time = e.detail.value;
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === "start") {
          year = year - 10;
        } else if (type === "end") {
          year = year + 10;
        }
        month = month > 9 ? month : "0" + month;
        day = day > 9 ? day : "0" + day;
        return `${year}-${month}-${day}`;
      },
    },
  };
</script>

<style>
  html,
  body,
  uni-page-body {
    background-color: #fff;
    color: #000;
  }
  .container {
    background-color: #fff;
    color: #000;
  }
  .uni-list-cell {
    width: 400px;
    margin: 0px auto;
    padding: 16px 18px;
    display: flex;
    gap: 10px;
    flex: 1;
    border: 1px solid blue;
    margin-bottom: 10px;
  }
</style>
